<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
	<style>
		.edit-text,
		.del-text,
		.enable-text,
		.disable-text {
			cursor: pointer;
			color: #444;
			margin-right: 14px;
		}

		.edit-text {
			color: #7438D5;
		}
		.del-text {
			color: #FF5959;
		}
	</style>
</head>

<body>

	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>商品管理</li>
			    <li>商品分类</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
					    <input type="text" class="form-control" v-model="search.name" placeholder="名称关键字">
					    <button type="button" class="btn btn-primary" @click="getList()">查询</button>
					    <button type="button" class="btn btn-success" @click="add()">新增</button>
					</form>
				</div>
				<div class="row">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>类别</th>
								<th>名称</th>
								<th>单位</th>
								<th>添加时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="row in rows">
								<td>{{ row.type }}</td>
								<td>{{ row.name }}</td>
								<td>{{ row.unit }}</td>
								<td>{{ row.add_time }}</td>
								<td>
									<span class="edit-text" @click="openType(row.id)">修改类别</span>
								</td>
							</tr>
						</tbody>
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>			
			</div>
		</div>
		<vue-modal :visible.sync="modalShow" title="新增商品分类">
			<div class="container">
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">类别</label>
						<div class="col-sm-4">
							<select class="form-control" v-model="cate.type">
								<option value=""> - 选择 - </option>
								<option v-for="item in base.types" :value="item.val"> {{ item.name }} </option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">分类名称</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" v-model="cate.name" placeholder="请输入名称">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">计量单位</label>
						<div class="col-sm-4">
							<select class="form-control" v-model="cate.unit">
								<option value=""> - 选择 - </option>
								<option v-for="item in base.units" :value="item.val"> {{ item.name }} </option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="button" class="btn btn-primary" @click="handleAdd()">保存</button>
						</div>
					</div>
				</form>
			</div>
		</vue-modal>
		<!-- 修改类别弹框 -->
		<vue-modal :visible.sync="typeShow" title="修改类别">
			<div class="container">
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">类别</label>
						<div class="col-sm-4">
							<select class="form-control" v-model="cate.type">
								<option value=""> - 选择 - </option>
								<option v-for="item in base.types" :value="item.val"> {{ item.name }} </option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="button" class="btn btn-primary" @click="categoriesOpt('edit')">保存</button>
						</div>
					</div>
				</form>
			</div>
		</vue-modal>
	</div>
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>

	<!-- vue -->
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/Sortable.min.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/vuedraggable.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/moment.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					name: ''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				modalShow: false,
				base: {
					types: [
						{val: 1,name:'衣服'},
						{val: 2,name:'下装'},
						{val: 3,name:'鞋'},
						{val: 4,name:'箱包'},
						{val: 5,name:'饰品'},
						{val: 6,name:'化妆品'},

						{val: 7,name:'皮具'},
						{val: 8,name:'男装'},
						{val: 9,name:'女装'},
						{val: 10,name:'男鞋'},
						{val: 11,name:'女鞋'},
						{val: 12,name:'珠宝'},
						{val: 13,name:'百货'},
					],
					units: [
						{val: 1,name:'件'},
						{val: 2,name:'双'},
						{val: 3,name:'盒'},
						{val: 4,name:'个'},
						{val: 5,name:'套'}
					]
				},
				cate:{
					type: '',
					name: '',
					unit: ''
				},
				typeShow:false,
				goodsCategoriesId:0,//商品分类id
			},
			components: {
				'vue-page': vuePage,
				'vue-modal': vueModal,
			},
			created: function(){
				this.getList();
				this.getBaseData();
			},
			methods:{
				openType(goodsCategoriesId){
					this.goodsCategoriesId = goodsCategoriesId;
					this.typeShow = true;
				},
				// 编辑团队
				categoriesOpt(type,id,name){
					console.log({type,id});
					let that = this;
					switch(type){
						case 'edit':
							$.post("{%:url('Goods/updataCate')%}",{
							type:that.cate.type,//是否是负责人
							id:that.goodsCategoriesId,
							},function(rsp){
								if(rsp.code==1){
									that.$message.success(rsp.msg);
									that.typeShow = false;
									that.getList();
								}else{
									that.$message.error(rsp.msg);
								}
								
							},'json')
							break;
						// case 'del':
						// 	$.post("{%:url('organization/delMember')%}",{
						// 	id:id
						// 	},function(rsp){
						// 		if(rsp.code==1){
						// 			that.$message.success(rsp.msg);
						// 			that.getOrganization();
						// 		}else{
						// 			that.$message.error(rsp.msg);
						// 		}
						// 		layer.alert(rsp.msg,{icon: icon},function(index){
						// 			layer.close(index);
						// 		});
						// 	},'json')
						// 	break;
					}
				},
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					$.post("{%:url('Goods/getCateList')%}?page=" + page,data,function(rsp){
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				getBaseData: function(){
					var _this = this;
					$.post("{%:url('Goods/getCateList')%}",{
						parent_id : ['>',0]
					},function(rsp){
						_this.base = rsp;
					},'json')
				},
				add: function() {
					this.modalShow = true;
				},
				handleAdd(){
					var data = this.cate;
					var _this = this;
					$.post("{%:url('Goods/cateHandle')%}",data,function(rsp){
						alert(rsp.msg);
						if (rsp.code) {
							_this.modalShow = false;
							_this.getList();
						}
					},'json')
				}
			}
		});
	</script>
</body>

</html>